<template>
	<z-paging-swiper>
		<view slot="top">
			<u-tabs-swiper 
				ref="uTabs" 
				:list="tabList" 
				:current="current" 
				:active-item-style="{'color': '#00c3c3'}"
				:bar-style="{'background-color': '#00c3c3'}"
				:is-scroll="false" 
				swiperWidth="750"
				@change="tabsChange" 
			></u-tabs-swiper>
		</view>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper 
			:style="{'height': '100%'}"
			:current="swiperCurrent" 
			@transition="transition" 
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<swiper-list-item ref="allSwiperList" :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script>
	import SwiperListItem from './swiper-list-item/swiper-list-item.vue';
	
	export default {
		components: { SwiperListItem },
		data() {
			return {
				tabList: [{
					name: '未报销'
				}, {
					name: '已报销'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onLoad(){
			const that = this;
			
			// 其他页面跳转回当前页刷新列表
			uni.$on('refJzList', (i) => {
				that.$nextTick(function(){
					if(that.$refs.allSwiperList[i].dataList.length == 0){
						// 重新加载
						that.$refs.allSwiperList[i].$refs.paging.reload();
					}else{
						// 刷新列表
						that.$refs.allSwiperList[i].$refs.paging.refresh();
					}
				});
			});
		},
		onUnload() {
			// 移除监听
			uni.$off('refJzList', this.refJzList);
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
</script>

<style>

</style>
